<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>职业搜索页面</title>
    <link rel="shortcut icon" href="../../image/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/main.css" media="all">
</head>
<body>
<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 测试测试   -->
            <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">&nbsp;</div>
            <!-- 头部区域 -->
            <div class="layui-col-xs4 layui-col-sm6 layui-col-md6">
                <div style="display:inline-block;margin-left: 20px;">
                    <img id="logimage" src="../../image/logo.png" height="50px" style="padding-top: 5px;cursor:pointer"
                         title="首页"
                         onclick="window.open('index.html', '_top', '', 'true')">
                </div>
            </div>

            <div class="layui-col-xs6 layui-col-sm4 layui-col-md4">
                <ul class="layui-nav" align="right" lay-filter="layadmin-layout-right">
                    <li class="layui-nav-item" lay-unselect>
                        <a id="icon-btn" href="javascript:;">
                            <img id="stuimg" src="../../image/avatar.png" class="layui-nav-img">
                            <cite id="stuname">贤心</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd id="viewinfo"><a>基本资料</a></dd>
                            <dd id="changepwd"><a>修改密码</a></dd>
                            <hr>
                            <dd id="logout" style="text-align: center;"><a>退出</a></dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                        <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
                    </li>
                </ul>
            </div>
            <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">&nbsp;</div>
        </div>
    </div>
</div>

<!--搜索栏-->
<div style="padding: 20px 20px 0px 20px; background-color: #FFFFFF;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">&nbsp;</div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <form class="layui-form layui-form-pane" lay-filter="searchjob">
                <div class="layui-form-item" style="margin-bottom: 60px">
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
                        <select name="qt">
                            <option value="company">公司</option>
                            <option value="position" selected="selected">职位</option>
                        </select>
                    </div>
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <input type="text" name="kw" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
                        <select name="quiz1">
                            <option value="">薪资水平</option>
                            <option value="2千以下">2千以下</option>
                            <option value="2-3千">2-3千</option>
                            <option value="3-4千">3-4千</option>
                            <option value="4-5千">4-5千</option>
                            <option value="5-6千">5-6千</option>
                            <option value="6-8千">6-8千</option>
                            <option value="0.8-1万">0.8-1万</option>
                            <option value="1-2万">1-2万</option>
                            <option value="2-3万">2-3万</option>
                            <option value="3-4万">3-4万</option>
                            <option value="4-5万">4-5万</option>
                            <option value="5万以上">5万以上</option>
                        </select>
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
                        <select name="quiz2" id="jobtype">
                            <option value="">职位类型</option>
                        </select>
                    </div>
                    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                        <button class="layui-btn" lay-submit="" lay-filter="querycriteria">
                            <i class="layui-icon layui-icon-search" style="padding-left: 20px;padding-right: 20px"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<!--内容主题-->
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">&nbsp;</div>
        <!--        左边栏-->
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <div id="demosource1"></div>
            <div id="tplpage"></div>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">&nbsp;</div>
    </div>
</div>
<!-- 岗位模板 -->
<script id="tpl_jobitem" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
    <div class="layui-card">
        <div class="layui-card-body" style="overflow:auto;padding: 20px">
            <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                <div><a href="jobDetail.html?jobid={{item.jobid}}" class="jonitem" style="font-size:20px">{{item.jobname}}
                    {{item.workplace }}</a></div>
                <div style="margin-top: 10px">
                    <a style="font-size:19px;color: #f15a34">{{ item.jobsalary }}</a>
                    <span lay-separator="|" style="margin-left: 10px">
                      <label>{{ item.workingexperience }}</label>
                      <label>{{ item.needpeople }}人</label>
                    </span>
                </div>
            </div>

            <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                <div style="font-size:20px;">{{ item.enterprise.enterprisename}}</div>
                <div style="margin-top: 10px">
                                <span lay-separator="|">
                                  <label>{{ item.enterprise.authInfomation.scale }}</label>
                                    <label>{{ item.enterprise.authInfomation.industry }}</label>
                                </span>
                </div>
            </div>

            <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                <div style="font-size:20px;color: #00F7DE" align="center">
                    <img src="{{item.enterprise.logoimg}}"
                         style="height: 60px;width: 60px;;border:1px solid #00F7DE;border-radius:10px;">
                </div>
            </div>
        </div>
        <div style="overflow:auto;padding: 10px 20px 10px 20px;background-color: #e5e4e4">
            <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                <!--  福利标签  -->
                {{# layui.each(item.corporatebenefits.split(','), function(index, corpo){ }}
                <div style="display: inline-block;border:1px solid #00f7de;padding: 5px 15px 5px 15px;font-size: 15px;margin-right: 10px;color: #0e90d2;font-weight: bold">
                    {{corpo}}
                </div>
                {{# }); }}
            </div>
        </div>
    </div>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
    暂无数据
    {{#  } }}
</script>
<script id="demotpl2" type="text/html">
    <ul>
        {{# layui.each(d.list, function(index, item){ }}
        <li style="height:50px;line-height:25px;border-bottom:1px solid #d4d4d4;color:#333;border-radius:2px 2px 0 0;padding: 10px 0px 5px 0px;">
            <div class="layui-col-xs6 layui-col-sm9 layui-col-md8">
                <div class="grid-demo grid-demo-bg1">
                    <div style="font-size:15px;">{{ item.jobname }}</div>
                    <div style="font-size:11px;">{{ item.enterprisename }}</div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm3 layui-col-md4">
                <div class="grid-demo grid-demo-bg1 a-hideText" align="right">
                    <a style="font-size:16px;color: #f15a34">{{ item.jobsalary }}</a>
                </div>
            </div>
        </li>
        {{# }); }}

        {{# if(d.list.length === 0){ }}
        无数据
        {{# } }
    </ul>
</script>
<script src="../../libs/layui/layui.js"></script>
<script src="../../js/header.js"></script>
<script>
    layui.use(['laytpl', 'jquery', 'form', 'element', 'layer', 'laypage'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var layer = layui.layer;
        var form = layui.form;
        let $ = layui.jquery;
        let laytpl = layui.laytpl;
        let laypage = layui.laypage;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        let url = ctx + "/pages/student/studentLogin.html";
        //退出登录
        $("#logout").bind('click', function () {
            window.sessionStorage.clear();
            window.open(url, "_top", "", "true");
        })
        //个人信息
        $("#viewinfo").bind('click', function () {
            let vurl = ctx + "/pages/student/studentindex.html";
            window.open(vurl, "_top", "", "true");
        })
        //忘记密码
        $("#changepwd").bind('click', function () {
            let curl = ctx + "/pages/student/stuForget.html";
            window.open(curl, "_top", "", "true");
        })
        $("#icon-btn").bind('click', function () {
            let vurl = ctx + "/pages/student/studentindex.html";
            window.open(vurl, "_top", "", "true");
        })

        let lim = 5;
        //获取参数列表
        let param = GetRequest();
        form.val('searchjob', param)
        laodjontype();
        initdata();

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            // console.log(elem)
            layer.msg(elem.text());
        });

        //根据条件查询
        form.on('submit(querycriteria)', function (data) {
            $.ajax({
                url: ctx + "/ygssecs/queryjobbycondition",
                type: 'GET',
                dataType: 'JSON',
                data: {
                    qt: data.field.qt,
                    kw: data.field.kw,
                    quiz1: data.field.quiz1,
                    quiz2: data.field.quiz2,
                    pageNum: 1,
                    pageSize: lim
                }
                // headers: {"token": sessionStorage.getItem("token")},
            }).done(function (datas) {
                // 得到模版html
                var tpljobitem = document.getElementById('tpl_jobitem').innerHTML;
                if (datas.code == 200) {
                    var tdata = {msg: datas.msg, list: datas.data};
                    laytpl(tpljobitem).render(tdata, function (html) {
                        document.getElementById('demosource1').innerHTML = html;
                    })
                    laypage.render({
                        elem: 'tplpage' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: datas.count //数据总数，从服务端得到
                        , limit: lim
                        , jump: function (obj, first) {
                            console.log(obj.curr)
                            if (!first) {
                                $.ajax({
                                    url: ctx + "/ygssecs/queryjobbycondition",
                                    type: 'GET',
                                    dataType: 'JSON',
                                    data: {
                                        qt: data.field.qt,
                                        kw: data.field.kw,
                                        quiz1: data.field.quiz1,
                                        quiz2: data.field.quiz2,
                                        pageNum: obj.curr,
                                        pageSize: lim
                                    },
                                    beforeSend: function () {
                                        loadindex = layer.load(1, {shade: 0.3});
                                    }
                                    // headers: {"token": sessionStorage.getItem("token")},
                                }).done(function (resdata) {
                                    layer.closeAll()
                                    var data = {msg: resdata.msg, list: resdata.data};
                                    laytpl(tpljobitem).render(data, function (html) {
                                        document.getElementById('demosource1').innerHTML = html;
                                    })
                                }).fail(function (e) {
                                    console.log(e)
                                })
                            } else {
                                console.log("第一次加载")
                            }
                        }
                    })
                }
            }).fail(function (error) {
                console.error(error)
            })
            return false;
        })


        //初始化数据
        function initdata() {
            var loadindex;
            var tdata;
            var turl;
            if (param.kw == '') {
                turl = ctx + "/ygssecs/queryjobbyEmptycondition";
                tdata = {};
            } else {
                tdata = {qt: param.qt, kw: param.kw, pageNum: 1, pageSize: lim};
                turl = ctx + "/ygssecs/queryjobbycondition";
            }
            $.ajax({
                url: turl,
                type: 'GET',
                dataType: 'JSON',
                data: tdata,
                beforeSend: function () {
                    loadindex = layer.load(1, {shade: 0.3});
                }
                // headers: {"token": sessionStorage.getItem("token")},
            }).done(function (res) {
                // 得到模版html
                layer.close(loadindex)
                var tpljobitem = document.getElementById('tpl_jobitem').innerHTML;
                var data = {msg: res.msg, list: res.data};
                if (res.code == 200) {
                    laytpl(tpljobitem).render(data, function (html) {
                        document.getElementById('demosource1').innerHTML = html;
                    })
                    laypage.render({
                        elem: 'tplpage' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: res.count //数据总数，从服务端得到
                        , limit: lim
                        , jump: function (obj, first) {
                            console.log(obj.curr)
                            if (!first) {
                                $.ajax({
                                    url: ctx + "/ygssecs/queryjobbycondition",
                                    type: 'GET',
                                    dataType: 'JSON',
                                    data: {qt: param.qt, kw: param.kw, pageNum: obj.curr, pageSize: lim},
                                    beforeSend: function () {
                                        loadindex = layer.load(1, {shade: 0.3});
                                    }
                                    // headers: {"token": sessionStorage.getItem("token")},
                                }).done(function (resdata) {
                                    layer.closeAll()
                                    var data = {msg: resdata.msg, list: resdata.data};
                                    laytpl(tpljobitem).render(data, function (html) {
                                        document.getElementById('demosource1').innerHTML = html;
                                    })
                                }).fail(function (e) {
                                    console.log(e)
                                })
                            } else {
                                console.log("第一次加载")
                            }
                        }
                    })

                }
            }).fail(function (error) {
                console.error(error)
            })
        }

        /**
         * 加载岗位类型
         */
        function laodjontype() {
            //加载层遮罩
            var loadindex;
            //加载岗位类型
            $.ajax({
                url: ctx + "/ygssecs/getjobType",
                type: 'GET',
                dataType: 'JSON',
                beforeSend: function () {
                    loadindex = layer.load(1, {shade: 0.3});
                }
                // headers: {"token": sessionStorage.getItem("token")},
            }).done(function (datas) {
                var list = datas['data'];
                var option;
                for (var i = 0; i < list.length; i++) {
                    option += "<option value='" + list[i]['typeid'] + "'>" + list[i]['typename'] + "</option>";//拼接option中的内容
                }
                $("#jobtype").append(option);//将option的拼接内容加入select中，注意选择器是select的ID
                form.render('select');//重点：重新渲染select
                layer.close(loadindex);//关闭加载遮罩
            }).fail(function () {
                console.log("error");
            });
        }

        //获取参数列表
        function GetRequest() {
            var url = decodeURI(location.search); //?id="123456"&Name="bicycle";
            var object = {};
            if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。
            {
                var str = url.substr(1);  //得到?后面的字符串
                var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",Name="bicycle"];
                for (var i = 0; i < strs.length; i++) {
                    object[strs[i].split("=")[0]] = strs[i].split("=")[1];
                }
            }
            return object;
        }
    })
</script>
</body>
</html>